<template>
  <div id="infobox">
    <!--即时通讯聊天界面-->
    <div class="info-body">
      <!--右边界面-->
      <div class="right-info">
        <div class="defult-info" v-if="activeId==0"></div>
        <div class="active-info" v-else>
          <!--消息界面-->
          <div class="info-body-user">
            <!--用户信息-->
            <div class="info-body-user-list">
              <div class="info-body-user-box">
                <!--<img src="@/assets/imageAdmin/logo.jpg" alt="">-->
                <div class="info-user-line">
                  <!--<p class="systomtitle">工作通知：厦门幼儿园管理系统</p>-->
                  <p class="systomtitle">工作通知</p>
                </div>
              </div>
            </div>
            <!--系统消息信息-->
            <div class="info-body-list">
              <div v-for="(item,index) in messageInfo" v-if="item.is_finish==0">
                <p class="list-time">{{item.create_time}}</p>
                <!--消息来源-->
                <div class="list-info-line">
                  <div class="left-user-anser" @click="infoDetail(item.id)">
                    <div class="info-user-anser systomBox">
                      <h2>任务 <span>任务状态：<em :class="item.is_finish==1?'c-success':'c-danger'">{{item.is_finish==1?'完成':'执行中'}}</em></span>
                      </h2>
                      <p>发布人：{{item.user.realname}}</p>
                      <p class="info-detail-desc info-detail-desccolor">任务名：{{item.name}}</p>
                      <p class="info-detail-right"><span>查看详情</span><i
                              class="el-icon-arrow-right"></i></p>
                    </div>
                  </div>
                </div>
              </div>
              <div v-if="messageInfo.length!==0">
                <p class="moreListLine" @click="checkMorePage" v-if="page<allpage">查看更多</p>
              </div>
              <div class="height40"></div>
            </div>
            <!--end-->
            <!--侧滑框-->
            <div class="DialogVisiblebox" :class="rightVisible?'dialog-fade-in':'dialog-fade-out'">
              <div class="centerDialogVisible">
                <p class="title-h2-Dialog"><span>详情</span><i class="el-icon-close" @click.stop="closeFnBox"></i></p>
                <div class="centerDialogDetail">
                  <div v-if="info">
                    <el-form label-width="100px">
                      <el-form-item label="任务名称:">
                        {{info.name}}
                      </el-form-item>
                      <el-form-item label="发布人:">
                        {{info.admin_name}}
                      </el-form-item>
                      <el-form-item label="下发时间:">
                        {{info.create_time}}
                      </el-form-item>
                      <el-form-item label="限改时间:">
                        {{info.end_time}}
                      </el-form-item>
                      <el-form-item label="任务描述:">
                        <div v-html="info.descript" class="contentTitle"></div>
                      </el-form-item>
                      <el-form-item label="任务状态:">
                        <div v-if="info.is_end == '未处理'">
                          <el-button type="primary" @click.native="taskTakeFn" size="small">接受任务</el-button>
                          <el-button type="danger" @click.native="taskChangeTakeFn('detail')" size="small">转派任务
                          </el-button>
                          <span class="c-danger">（转派指定人员任务）</span>
                        </div>
                        <div v-else>
                          {{info.is_end}}
                          <el-button type="success" size="small" class="ml-10" v-if="info.is_end=='执行中'"
                                     @click.stop="gotocheack(1)">去执行
                          </el-button>
                        </div>
                        <div class="c-danger lookLsit" @click.stop="showTaskList">查看执行情况</div>
                      </el-form-item>
                    </el-form>
                  </div>
                  <div class="closeBtn" @click.stop="closeFnBox">关闭</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--// 获取列表-->
    <taskListDialog :visible.sync="taskListvisible" v-if="taskListvisible" :taskId="info.id"></taskListDialog>
    <!--转派人员-->
    <chooseUser :visible.sync="uservisible" v-if="uservisible" @getUser="getUser" :dialogId="info.id"
                :userLine="info.users" :userNumber="userNumber"></chooseUser>
    <!--去执行回复任务-->
    <!--detail 任务详情信息 getUser 执行函数 commonType回复类型，1去执行 2管理员评论-->
    <teskCommon :visible.sync="commonvisible" v-if="commonvisible" @getUser="getUser" :detail="info"
                :commonType="commonType"></teskCommon>
  </div>
</template>

<script>
  import taskListDialog from '@/components/dialog/taskListDialog.vue'
import chooseUser from '@/components/dialog/chooseUser.vue'
import teskCommon from '@/components/dialog/taskCommonDialog.vue'

export default {
    components: {
      taskListDialog,
      chooseUser,
      teskCommon
    },
    data () {
      return {
        activeId: 'systomlist',
        rightVisible: false,
        tips: true,
        vote: false,
        task: false,
        messageInfo: [],
        editForm: {}, // 编辑界面数据
        radioName: 0,
        user_id: 0,
        role: 0,
        info: null,
        pageClickStatus: null,
        textareaVal: '',
        radioNameStatus: '1',
        taskListvisible: false,
        uservisible: false,
        commonvisible: false,
        userNumber: 1, // 选择用户人数 1 单选 2多选
        pageType: 1, // 1 去执行 2 评论回复执行者
        commonType: null,
        rightBoxIndex: null,
        page: 1,
        adminUserId: null,
        checkValAll: this.global.newInfomation,
        editBox: null,
        allpage: 1
      }
    },
    created () {
      console.log('全局变量：', this.checkValAll)
      this.InitFn()
    },
    watch: {
      checkValAll: {
        immediate: true,
        handler (val) {
          console.log('改变列表:', val)
        }
      }
    },
    methods: {
      InitFn () {
        const loading = this.$loading({
          lock: true,
          text: '加载中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.3)'
        })
        this.$fetch('task/index', {p: this.page}).then((response) => {
          console.log('数据：', response)
          if (response.code === 0) {
            if (this.page === 1) {
              let page = response.list.per_page // 每一页20条
              let total = response.list.total// 总
              console.log(total % page)
              console.log(parseInt(total / page))
              let allpage = parseInt(total / page)
              if (total % page !== 0) {
                allpage += 1
              }
              console.log('页数：', allpage)
              this.allpage = allpage
              this.messageInfo = response.list.data
            } else {
              for (let i in response.list.data) {
                this.messageInfo.push(response.list.data[i])
              }
            }
          } else {
          }
          loading.close()
        }).catch((err) => {
          console.log(err)
        })
      },
      checkMorePage () {
        if (this.page < this.allpage) {
          this.page += 1
          this.InitFn()
        }
      },
      // 右侧滑窗获取详情
      infoDetail (id, option) {
        if (!this.rightVisible) {
          this.editBodyFn(id, option)
        } else {
          if (option === 'reshDetail') {
            this.editBodyFn(id, option)
          } else {
            this.rightVisible = !this.rightVisible
          }
        }
      },
      editBodyFn (id, option) {
        this.$fetch('task/edit', {id: id}).then((response) => {
          console.log('数据：', response)
          if (response.code === 0) {
            this.editBox = id
            this.info = response.vo
            if (option !== 'reshDetail') {
              this.rightVisible = !this.rightVisible
            }
            console.log(this.rightVisible)
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      closeFnBox () {
        this.centerDialogVisible = !this.centerDialogVisible
      },
      tabId (id) {
        this.activeId = id
        this.centerDialogVisible = false
      },
      // 接受 转派
      // 接受任务
      taskTakeFn () {
        let _self = this
        this.$confirm('确定接受本次任务?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log('确认接受任务')
          _self.$fetch('task/accept?id=' + this.info.id).then((response) => {
            if (response.code === 0) {
              _self.$message({
                type: 'success',
                message: '接受成功!'
              })
              this.infoDetail(this.editBox, 'reshDetail')
            } else {
              this.$message.error(response.msg)
            }
          }).catch((err) => {
            console.log(err)
          })
        }).catch(() => {
          console.log('取消')
        })
      },
      taskChangeTakeFn () {
        this.uservisible = true
      },
      getUser () {
        // console.log('获取选中的用户', option)
        this.infoDetail(this.editBox, 'reshDetail')
      },
      gotocheack (option) {
        this.commonType = option
        this.commonvisible = true
      },
      showTaskList () {
        this.taskListvisible = true
      },
      closeFnBox () {
        this.rightVisible = false
      }
    }
  }
</script>

<style lang="scss">
  //@import "../../assets/scss/info.scss";

  .closeBtn {
    text-align: center;
    color: #20a0ff;
    font-size: 16px;
    border-top: 1px solid #f8f8f8;
    padding: 20px 0;
    margin-top: 40px;
    cursor: pointer;
  }

  .linelist {
    display: flex;
    /*align-items: center;*/
    span {
      &:first-child {
        display: block;
        width: 120px;
        text-align: right;
        margin-right: 5px;
      }
      &:last-child {
        flex: 1;
      }
    }
  }

  .textareaP {
    margin-top: 10px;
    span {
      &:first-child {
        text-align: left !important;
      }
    }
  }

  .textareaBox {
    margin: 10px;
  }

  .colorTime {
    color: #20a0ff;
  }

  .radioNameStatus {
    padding: 10px;
    margin-bottom: 30px;
  }

  .formBox {
    padding: 0 10px;
    .el-form-item__label {
      width: 120px !important;
      padding-right: 0;
      font-size: 16px;
      margin-right: 5px;
    }
  }

  .contentBody {
    /*color:#000;*/
    padding: 10px;
  }

  .submitFnBox {
    margin: 0 auto;
    display: block;
  }
</style>
